<template>
  <div class="pedestalList">
    <el-dialog title="查看房号" class="pedestalList" :visible.sync="isDial"  width="800px">
      <el-table :data="gridData" border :span-method="objectSpanMethod" size="mini"  max-height="600" tooltip-effect="dark">
        <el-table-column property="tier" label="楼层" width="50"></el-table-column>
        <el-table-column property="no" label="房号" width="80"></el-table-column>
        <el-table-column property="houseType" label="户型"></el-table-column>
        <el-table-column property="builtArea" label="建筑面积" width="100"></el-table-column>
        <el-table-column property="type" label="房屋类型" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.type=='1'?'平层':scope.row.type=='2'?'LOFT':scope.row.type=='3'?'复式':scope.row.type=='4'?'排屋':scope.row.type=='5'?'别墅':scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column property="orientation" label="朝向" width="80"></el-table-column>
        <el-table-column property="name" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addRoom('edit',scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column property="date" label>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addRoom('add',scope.row)">添加房号</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <addRoom></addRoom>
  </div>
</template>
<script>
import addRoom from "./addRoom.vue";  //修改栋座
import { request } from "../../../assets/request.js";
export default {
  data() {
    return {
      gridData: [],
      isDial: false,
      housesId:'',
      unitId:'',
      spanArr:[],
      row:''
    };
  },
  created() {
    let that = this;
    this.$root.$on("seeRoom", (row) => {
      console.log(row)
      if(row){
        that.row=row
      }
      that.isDial = true;
      that.selectList()
    });
  },
  methods: {
    del(row) { //删除房号
      let that=this
      request.delAlert({
          name:'删除该房号',
          that,
          fn(obj){
              let url='houses/number/'+row.id+'?greenToken='+request.greenToken
              request.ajaxDel({
                url,
                that,
                fn(res){
                  that.$message(obj)
                  that.selectList();
                }
              })
          }
      })
    },
    addRoom(type,data){ //修改房号
        let title=this.row.name+this.row.unit+this.row.unitNo+'单元'+data.tier
        console.log(title)
        this.$root.$emit("addRoom", type,data,title);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //合并单元格
      if (columnIndex === 0 || columnIndex === 7) {
        if(this.spanArr[rowIndex]){
            return {
                rowspan:this.spanArr[rowIndex],
                colspan:1
            }
        }else{
            return {
                rowspan: 0,
                colspan: 0
            }
        }
      }
    },
    selectList(){ //房号列表查询
      let url="houses/number"
      let that=this   //解决this指向问题
      let obj={
        housesId:that.row.housesId,
        housesUnitId:that.row.id
      }
      request.ajaxGet({
        url,
        that,
        params:obj,
        fn(res){
          if(res){
            let arr=[]
            let dataList=[]
            for(let i=0,len=res.length;i<len;i++){
              for(let j=0,leng=res[i].list.length;j<leng;j++){
                dataList.push(res[i].list[j])
                if(j=='0'){
                  arr.push(res[i].size)
                }else{
                  arr.push(0)
                }
              }
            }
            for(let i=0,len=dataList.length;i<len;i++){
              dataList[i].houseType=dataList[i].houseType.split('-')
              if(!dataList[i].houseType[0]){
                dataList[i].houseType=''
                dataList[i].builtArea=''
              }else{
                dataList[i].houseType=dataList[i].houseType[0]+'室'+dataList[i].houseType[1]+'厅'+dataList[i].houseType[2]+'卫'+dataList[i].houseType[3]+'阳'
                dataList[i].builtArea=dataList[i].builtArea+'平米'
              }
              
              dataList[i].tier=dataList[i].tier+'F'
            }
            that.gridData=dataList
            that.spanArr=arr
          }
        }
      })
    }
  },
  components: {
    addRoom
  }
};
</script>
<style lang="less" scoped>
.pedestalList {
  text-align: left;
  .el-dialog {
    text-align: left;
  }
  .el-dialog__header {
    text-align: left !important;
    .el-dialog__title {
      float: left;
    }
  }
  .addRow {
    margin-bottom: 10px;
    overflow: hidden;
    span {
      font-size: 16px;
      color: #000;
      font-weight: 500;
    }
  }
  .foot {
    overflow: hidden;
    padding: 20px 0px;
    margin-bottom: -30px;
    margin-top: 10px;
  }
}
</style>

